<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<jsp:include page="/WEB-INF/pages/admin/public/meta.jsp"></jsp:include>
<title>服务列表</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 产品管理 <span class="c-gray en">&gt;</span>服务列表 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
	<div class="text-c">
		<select style="width:250px" id="product_status" class="select-box" >
			<option value="0">全部</option>
			<option value="1">已上线</option>
			<option value="2">未上线</option>
		</select>
		<input type="text" name="" id="seachName" placeholder="服务名称" style="width:250px" class="input-text">
		<button class="btn btn-success" type="submit" onclick="product_search()"><i class="Hui-iconfont" onclick="product_search()">&#xe665;</i> 搜服务</button>
	</div>
	<div class="cl pd-5 bg-1 bk-gray mt-20">
		<span class="l">
			<a href="javascript:;" onclick="productUp()" class="btn btn-success radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量上线</a>
			<a href="javascript:;" onclick="productDown()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量下线</a>
		</span>
		<span class="r">共有数据：<strong>${count }</strong> 条</span>
	</div>
	<div class="mt-20">
		<form id="form-product-list" >
			<table class="table table-border table-bordered table-bg table-hover table-sort">
	 			<thead>
					<tr class="text-c">
						<th width="20"><input type="checkbox"></th>
						<th width="120">产品名称</th>
						<th width="400">说明</th>
						<th width="50">市场价格</th>
						<th width="120">供应商</th>
						<th width="60">状态</th>
						<th width="50">操作</th>
					</tr>
	 			</thead>
	 			<tbody>
					<c:forEach var="product" items="${productlist }" >
		 				<tr class="text-c" id="productdata${product.id }">
							<td width="20"><input name="productCheckBox" type="checkbox" value="${product.id }"></td>
							<td width="120">${product.serviceName }</td>
							<td width="400">${product.serviceInfo }</td>
							<td width="50">${product.price }</td>
							<td width="120">${product.provider.name }</td>
							<c:if test="${product.status eq '1' }">
								<td class="td-status"><span class="label label-success radius">已上线</span></td>
							</c:if>
							<c:if test="${product.status eq '2' }">
								<td class="td-status"><span class="label label-default radius">未上线</span></td>
							</c:if>
							<c:if test="${product.status ne '1' && product.status ne '2' }">
								<td class="td-status"><span class="label label-danger radius">未审核</span></td>
							</c:if>
							<td class="td-manage">
								<c:if test="${product.status eq '1' }">
									<a style="text-decoration:none" onClick="updataProductStatus(this,${product.id},2)" href="javascript:;" title="下线" class="ml-5" ><i class="Hui-iconfont">&#xe6de;</i></a>
								</c:if>
								<c:if test="${product.status eq '2' }">
									<a style="text-decoration:none" onClick="updataProductStatus(this,${product.id},1)" href="javascript:;" title="上线" class="ml-5" ><i class="Hui-iconfont">&#xe6dc;</i></a>
								</c:if>
								<a style="text-decoration:none" onClick="productDetail(${product.id})" href="javascript:;" title="详情" class="ml-5" ><i class="Hui-iconfont">&#xe695;</i></a>
							</td>
		 				</tr>
					</c:forEach>
	 			</tbody>
			</table>
		</form>
	</div>
</div>

<!--_footer 作为公共模版分离出去-->
<jsp:include page="/WEB-INF/pages/admin/public/footer.jsp"></jsp:include>
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/xinda/WebRoot/admin/lib/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="admin/lib/My97DatePicker/4.8/WdatePicker.js"></script> 
<script type="text/javascript" src="admin/lib/datatables/1.10.0/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="admin/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript">
$('.table-sort').dataTable({
	"aaSorting": [[ 1, "desc" ]],//默认第几个排序
	"bStateSave": true,//状态保存
	"aoColumnDefs": [
	//{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
	{"orderable":false,"aTargets":[0,5]}// 制定列不参与排序
	]
});

function updataProductStatus(obj,id,status) {
	layer.confirm( status==1 ? '确认上线码？' : '确认下线码？',function(index){
		$.ajax({
		    url: "productUpdateOfStatus.action",
		    type: "POST",
		    data: {
		          "id" : id,
		          "status" : status
		    },
		    success: function(data){
		    	if(status==1){
		    		$(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已上线</span>');
		    		$(obj).parents("td").html('<a style="text-decoration:none" onClick="updataProductStatus(this,'+id+',2)" href="javascript:;" title="下线" class="ml-5" ><i class="Hui-iconfont">&#xe6de;</i></a><a style="text-decoration:none" onClick="productDetail('+ id +')" href="javascript:;" title="详情" class="ml-5" ><i class="Hui-iconfont">&#xe695;</i></a>');
		    	}else{
		    		$(obj).parents("tr").find(".td-status").html('<span class="label label-default radius">未上线</span>');
		    		$(obj).parents("td").html('<a style="text-decoration:none" onClick="updataProductStatus(this,'+id+',1)" href="javascript:;" title="上线" class="ml-5" ><i class="Hui-iconfont">&#xe6dc;</i></a><a style="text-decoration:none" onClick="productDetail('+ id +')" href="javascript:;" title="详情" class="ml-5" ><i class="Hui-iconfont">&#xe695;</i></a>');
		    	}
				layer.msg( status==1 ? '上线成功!' : '下线成功',{icon: 1,time:2000});
		    },
		    error: function(data){
		        layer.msg(status==1 ? '上线失败!' : '下线失败',{icon: 5,time:2000});
		    }
		});
	});
}

function productDetail(id){
	var index = layer.open({
		type: 2,
		title: "产品详情",
		content: "productDetail.action?id="+id
	});
	layer.full(index);
}

function productUp(){
	layer.confirm('确认批量上线吗？',function(index){
		$("#form-product-list").ajaxSubmit({
			type: "POST",
			url: "productBatchUp.action",
		    success: function(){
		    	layer.msg('上线成功!',{icon: 1,time:2000});
				window.location.reload();
		    },
		    error: function(){
		        layer.msg('上线失败！',{icon: 5,time:2000});
		    }
		});
	});
}

function productDown(){
	layer.confirm('确认要批量下线吗？',function(index){
		$("#form-product-list").ajaxSubmit({
			type: "POST",
			url: "productBatchDown.action",
		    success: function(){
		    	layer.msg('下线成功!',{icon: 1,time:2000});
				window.location.reload();
		    },
		    error: function(){
		        layer.msg('下线失败！',{icon: 5,time:2000});
		    }
		});
	});
}
function product_search(){
	var servicestatus = document.getElementById('product_status').value;
	var productName = document.getElementById('seachName').value;
	window.location.href='productList.action?status='+ servicestatus +'&productName='+productName;	
}
</script>
</body>
</html>